<template>
  <div>
    <div class="common-tab-box">
      <div @click="change('row3left')" :class="{ 'active': activeName === 'row3left' }">市容环境</div>
      <div @click="change('row3right')" :class="{ 'active': activeName === 'row3right' }">渣土车治理</div>
    </div>
    <KeepAlive>
      <component :is="componentId"></component>
    </KeepAlive>
  </div>
</template>
<script>
import row3left from './row3left.vue'
import row3right from './row3right.vue'
export default {
  name: '',
  data () {
    return {
      componentId: 'row3left', activeName: 'row3left'
    }
  },
  components: {
    row3left,
    row3right
  },
  methods: {
    change (e) {
      this.activeName = e
      this.componentId = e
    }
  }
}
</script>
